<template>
	<uni-popup ref="productPopupRefs" type="bottom">

		<view class="container" :data-theme="theme">
			<view class="popup_header">
				<view></view>
				<view class="popup_title">{{activityData.productScope == 1 ? '商品信息' : '品类信息'}}</view>
				<uni-icons type='closeempty' size="28" @click="productPopupCancel"></uni-icons>
			</view>
			<view class="content">
				<!-- 这里是可滚动的内容 -->
				<scroll-view class="scroll-view" scroll-y>
					<view class="scroll-view-inner"
						v-if="activityData && activityData.enrolledActivityProductVoList && activityData.enrolledActivityProductVoList.length && activityData.productScope == 1">
						<view class="checke_item" v-for="(item,index) in activityData.enrolledActivityProductVoList"
							:key="index">
							<view class="checke_top">
								<view class="check_left">
									<view class="checke_img">
										<image :src="item.image" mode="">
										</image>
									</view>
									<view class="product_right">
										<view style="font-weight: bold;width: 360rpx;">
											[{{item.brandName}}]{{item.name}}
										</view>

										<view><span style="font-weight: bold;margin-right: 10rpx;">{{item.sku}}</span>
										</view>
									</view>
								</view>

								<view class="check_right">
									<u-icon name="trash-fill" @click="handleDelete(item)"></u-icon>
								</view>
							</view>
						</view>
					</view>
					<!--  -->
					<view class="scroll-view-inner"
						v-if="activityData && activityData.enrolledActivityProductVoList && activityData.enrolledActivityProductVoList.length && activityData.productScope == 2">
						<view class="card_list" v-for="(item,index) in activityData.proCategoryCacheVoList"
							:key="index">
							<view class="outer" @click="toggleCollapse(item,index)">
								<view class="outer_card_item">
									<view class="outer_left">
										<view class="left_top">
											<u-tag :text="item.name" closable size="mini" color="black" bgColor="#fff"
												borderColor="#fff" @close="handleDeleteFirst(item)"></u-tag>
										</view>
									</view>
									<view class="outer_right">
										<view>
											<u-icon :name="item.collapsed ? 'arrow-down' : 'arrow-up'"
												size="16"></u-icon>
										</view>
									</view>
								</view>
							</view>
							<view class="inner" v-if="item.collapsed && item.childList.length"
								v-for="(current,index2) in item.childList" :key="index2">
								<view class="inner_title">
									<u-tag :text="current.name" closable color="black" bgColor="#fff" borderColor="#fff"
										@close="handleDeleteSecond(current)"></u-tag>
								</view>
								<view class="product_item">
									<u-tag v-if="current.childList.length" v-for="(cur,index3) in current.childList"
										:key="index3" :text="cur.name" closable color="black" bgColor="#f6f4f6"
										borderColor="#f6f4f6" @close="handleDeleteThirdly(cur)"></u-tag>
								</view>
							</view>
						</view>
					</view>
					<view class="scroll-view-inner"
						v-if="!activityData || !activityData.enrolledActivityProductVoList || !activityData.enrolledActivityProductVoList.length">
						<u-empty mode="data" style="height: 100%;"
							icon="http://cdn.uviewui.com/uview/empty/data.png"></u-empty>
					</view>
				</scroll-view>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import {
		setThemeColor
	} from '../../../../utils/setTheme';
	import {
		addActivityRegistrationApi,
	} from "@/api/marketing.js";
	let app = getApp()
	export default {
		props: {
			// 活动信息
			activityData: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				bgColor: "#fff",
				theme: app.globalData.theme,

			}
		},
		onLoad(options) {
			this.bgColor = setThemeColor()
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
		},
		created() {
			// collapsed
		},
		watch: {
			activityData(newVal, oldVal) {
				this.activityData = newVal
			}
		},
		methods: {
			// 点击查看商品
			toggleCollapse(item, index) {
				this.$set(this.activityData.proCategoryCacheVoList[index], 'collapsed', !this.activityData
					.proCategoryCacheVoList[index].collapsed)
			},
			// 打开弹窗
			openPopup(activityData) {
				this.$refs.productPopupRefs.open()
			},
			// 关闭弹窗
			productPopupCancel() {
				this.$refs.productPopupRefs.close()
			},
			// 递归函数来获取第三级分类
			getThirdLevelCategories(category) {
				let thirdLevelCategories = [];

				if (category.childList && category.childList.length > 0) {
					category.childList.forEach(child => {
						if (child.level === 3) {
							thirdLevelCategories.push(child); // 将符合条件的第三级分类加入结果数组
						} else {
							// 递归调用，并将返回的结果与当前结果合并
							thirdLevelCategories = thirdLevelCategories.concat(this.getThirdLevelCategories(
								child));
						}
					});
				}
				return thirdLevelCategories;
			},
			// 通用删除的所需要传递的参数
			generalDeleteParams() {
				let data = {
					id: this.activityData.id,
					activityCategory: 8,
					activityTimeList: this.activityData.activityTimeList,
					promotionInventory: this.activityData.promotionInventory,
					customerDailyLimit: this.activityData.customerDailyLimit,
					productScope: this.activityData.productScope,
				}
				return data
			},


			// 删除品类一级分类
			handleDeleteFirst(item) {
				// 使用递归函数获取所有第三级分类数据
				let thirdLevelCategories = this.getThirdLevelCategories(item).map(item => {
					return {
						businessSign: 3, // 1添加  2编辑 3删除
						enrolledActivityId: item.enrolledActivityId,
					}
				});
				let data = this.generalDeleteParams()
				data.addEnrolledActivityProductDTOList = thirdLevelCategories
				uni.showModal({
					title: '提示',
					content: '确定删除该品类吗？',
					success: (res) => {
						if (res.confirm == true) {
							this.deleteActivityRegistration(data)
						} else {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: 'none'
							});
						}
					}
				})

			},
			// 删除品类二级分类
			handleDeleteSecond(item) {
				// 使用递归函数获取所有第三级分类数据
				let thirdLevelCategories = this.getThirdLevelCategories(item).map(item => {
					return {
						businessSign: 3, // 1添加  2编辑 3删除
						enrolledActivityId: item.enrolledActivityId,
					}
				});
				let data = this.generalDeleteParams()
				data.addEnrolledActivityProductDTOList = thirdLevelCategories
				uni.showModal({
					title: '提示',
					content: '确定删除该品类吗？',
					success: (res) => {
						if (res.confirm == true) {
							this.deleteActivityRegistration(data)
						} else {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: 'none'
							});
						}
					}
				})
			},
			// 删除品类三级分类
			handleDeleteThirdly(item) {
				let data = this.generalDeleteParams()
				data.addEnrolledActivityProductDTOList = [{
					businessSign: 3, // 1添加  2编辑 3删除
					enrolledActivityId: item.enrolledActivityId,
				}]
				uni.showModal({
					title: '提示',
					content: '确定删除该品类吗？',
					success: (res) => {
						if (res.confirm == true) {
							this.deleteActivityRegistration(data)
						} else {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: 'none'
							});
						}
					}
				})
			},
			// 删除 部分商品中的   某个商品
			handleDelete(item) {
				let data = {
					id: this.activityData.id,
					activityCategory: 8,
					activityTimeList: this.activityData.activityTimeList,
					promotionInventory: this.activityData.promotionInventory,
					customerDailyLimit: this.activityData.customerDailyLimit,
					productScope: this.activityData.productScope,
					addEnrolledActivityProductDTOList: [{
						businessSign: 3, // 1添加  2编辑 3删除
						enrolledActivityId: item.enrolledActivityId,
					}]
				}
				uni.showModal({
					title: '提示',
					content: '确定删除该商品吗？',
					success: (res) => {
						if (res.confirm == true) {
							this.deleteActivityRegistration(data)
						} else {
							uni.showToast({
								title: '已取消',
								duration: 2000,
								icon: 'none'
							});
						}
					}
				})
			},
			// 删除商品接口
			async deleteActivityRegistration(data) {
				let that = this;
				that.loading = true;
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				try {
					let res = await addActivityRegistrationApi(data)
					if (res.code == 200) {
						that.loading = false;
						that.$emit("getNoRegistrationActivity")
						uni.showModal({
							title: '提示',
							content: '删除成功',
							showCancel: false,
							success: (res) => {
								if (res.confirm == true) {}
							}
						})
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none',
							duration: 2000
						});
					}
				} catch (e) {
					//TODO handle the exception
					uni.showToast({
						title: e,
						icon: 'none',
						duration: 1500
					})
				}

				uni.hideLoading()
			},
		}
	}
</script>
<style lang="scss">
	page {
		height: 100%;


	}

	.container {
		display: flex;
		flex-direction: column;
		height: 100%;
		background-color: #fff;
	}

	.popup_header {
		padding-top: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		font-size: 21rpx;

		.popup_title {
			font-size: 30rpx;
			font-weight: bold;

		}
	}

	.content {
		flex: 1;
		overflow: hidden;
		background-color: #f7f5f7;
	}

	.scroll-view {
		height: 100%;
	}

	.scroll-view-inner {
		height: 600rpx;

		.checke_item {
			font-size: 21rpx;
			display: flex;
			flex-direction: column;
			background-color: white;
			padding: 10rpx 20rpx;
			margin: 20rpx;
			border-radius: 20rpx;

			.checke_top {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.check_left {
					display: flex;
					align-items: center;

					.checke_img {
						margin-right: 20rpx;

						image {
							width: 80rpx;
							height: 80rpx;
						}
					}
					.product_right {
						line-height: 40rpx;
					}
				}

				.check_right {
					display: flex;
					flex-direction: column;

					.num {
						margin-bottom: 10rpx;
						font-weight: bold;
					}
				}
			}

			.checke_bottom {
				display: flex;
				align-items: center;
				font-size: 21rpx;
				margin: 10rpx 0;
				background: #e3edf3;
				padding: 10rpx;
				border-radius: 10rpx;
			}
		}

		// 品类样式
		.card_list {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;
			border-radius: 10rpx;
			position: relative;
			margin-top: 10rpx;

			.outer_card_item {

				padding: 20rpx;
				margin: 0rpx 20rpx;
				background-color: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 21rpx;
				border-bottom: 1rpx solid #eee;
				border-radius: 10rpx;

				.outer_left {
					// display: flex;
					// align-items: center;
					// flex-direction: column;

					.left_top {
						font-size: 25rpx;
						font-weight: bold;
						width: 400rpx;
						display: flex;
					}


				}



			}

			.inner {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				padding: 0 20rpx;
				margin: 0 20rpx;

				.inner_title {
					display: flex;
					font-size: 26rpx;
					background-color: #fff;
					font-weight: bold;
					padding: 20rpx;
				}

				.product_item {
					display: flex;
					// justify-content: space-between;
					// align-items: center;
					font-size: 21rpx;
					margin-bottom: 20rpx;
					padding: 10rpx 20rpx;
				}
			}
		}
	}
</style>